<template>
  <div class="page">
    <div>
      <van-nav-bar
        title="编辑资料"
        left-text="返回"
        right-text="个人主页"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div class="img_up">
      <van-image
        round
        width="5rem"
        height="5rem"
        :src="this.url_img"
      />
      <van-uploader
        :after-read="afterRead"
        :max-count="1"
      />
      <!-- show-upload ="true" -->
    </div>
    <div class="sex">
      <van-cell title="姓名" is-link v-model="name"/>
    </div>
    <div class="characte">
      <van-cell
        title="个性签名"
        is-link
        to="autograph"
        :value="this.autograph"
      />
    </div>
    <div>
      <van-cell title="性别" is-link to="gender" :value="this.sex_num" />
    </div>
    <div>
      <van-cell title="账号管理" is-link to="management" />
    </div>
    <van-button type="danger" block>退出登录</van-button>
  </div>
</template>
<script>
import Vue from "vue";
import { NavBar, Cell, CellGroup } from "vant";
import { Image as VanImage } from "vant";
import { Uploader, Button } from "vant";
Vue.use(Button);
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Uploader);

Vue.use(VanImage);

Vue.use(NavBar);
export default {
  nmae: "compilation",
  data() {
    return {
      name:'',
      countMax: 9,
      fileList: [],
      fileArr: [],
      url_img:'',
      data:'',
      autograph:'',
      sex_num:''
    };
  },
  mounted() {
    // console.log(this.$route.query.sex_num)
    // this.sex_num=this.$route.query.sex_num
    // this.autograph=this.$route.query.value
     let user_id=localStorage.getItem("userId")
     this.axios({
       url:"http://localhost:3000/query_data",
       method:"post",
       data:{
         userID:user_id
       }
     }).then((res)=>{
      //  console.log(res.data[0])
      //  localStorage.setItem("person_data",res.data[0])
       this.url_img=res.data[0].head_img
       this.sex_num=res.data[0].sex
       this.autograph=res.data[0].signature
       this.name=res.data[0].user_name

     })
  },
  methods: {
    onClickLeft() {
      this.$router.replace("/index/ownpage")
    },
    afterRead(file) {
      console.log(file)
     let formData = new FormData();
     let user_id=localStorage.getItem("userId")
    //  console.log(user_id)

     formData.append("image",file.file);
     formData.append("user_id",user_id)
      this.axios({
        url:"http://localhost:3000/updata_img",
        method:"post",
        data:formData,
        processData: false,
        contentType: false,
      }).then((res)=>{
        console.log(res.data)
      })
      window.location.reload()

    },
  },
};
</script>
<style scoped>
.page {
  position: relative;
}
.van-image {
  position: absolute;
  left: 40%;
  top:30%;
  background-position: center;
  background-size: cover;
  
}

.van-cell__title {
  text-align: left;
  padding-left: 1px;
}
/deep/.van-nav-bar__text {
  color: black;
}
/deep/.van-icon {
  color: black;
}
/deep/.van-nav-bar__right .van-nav-bar__text {
  color: #1989fa;
}
.img_up {
  width: 100%;
  height: 150px;
    position: relative;
}
.van-uploader {
  position: absolute;
  top: 50px;
  right: 80px;
}
.van-image {
  z-index: 9999;
}
.sex .van-cell__value {
  color: #1989fa;
}
.characte .van-cell__value {
  font-size: 9px;
}
.van-button {
  position: absolute;
  top: 190%;
}
</style>